<template>
  <!-- 
    Electron的ipcRenderer模块实现的选择文件器
    默认打开文件夹，如果需要选择文件，则需要在调用处配置属性dir='file'
    属性caption显示按钮的文本信息
    成功调用后会向父进程发送一个‘btnSelectItem’消息用于返回选中的文件全路径
  -->
  <el-button size="small" type="primary" v-bind="$attrs" v-on="btnListeners">{{caption}}</el-button>
</template>
<script>
import { ipcRenderer } from 'electron'

export default {
  name: 'FileChooserElesBtn',
  props: ['caption', 'dir', 'url'],
  inheritAttrs: false,
  computed: {
    btnListeners: function () {
      // debugger
      var vm = this
      var ipc = ipcRenderer
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign(
        {},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 我们添加自定义监听器
        // 或复写一些监听器的行为
        {
          // 这里确保组件配合`v-model`的工作
          click: function (event) {
            if (vm.dir != 'file') {
              // 如果要选择路径，则添加以下两个路径
              ipc.send('open-directory-dialog', vm.url, 'openDirectory')
            } else {
              ipc.send('open-directory-dialog', vm.url, 'openFile')
            }
            // 此处使用once可以保证该监听器函数只使用一次
            // 如果使用on,则可能会造成在下次调用时上次的监听器被销毁
            // 造成一次调用多次响应的效果
            ipc.once('selectedItem', function (event, path) {
              // console.log(path);
              vm.$emit('btnSelectItem', path)
            })
          }
        }
      )
    }
  },
  created () {
    // console.log("ipcRenderer", ipcRenderer);
  }
}
</script>